<template>
  <div class="role-select">
    <div class="role-title">角色选择</div>
    <div class="role-list">
      <div class="role-item" :class="{active: roleIndex === 1}" @click="roleIndex = 1">
        <el-icon class="icon">
          <School/>
        </el-icon>
        <div class="item-title">申报单位</div>
      </div>
      <div class="role-item" :class="{active: roleIndex === 2}" @click="roleIndex = 2">
        <el-icon class="icon">
          <House/>
        </el-icon>
        <div class="item-title">推荐单位</div>
      </div>
      <div class="role-item" :class="{active: roleIndex === 3}" @click="roleIndex = 3">
        <el-icon class="icon">
          <User/>
        </el-icon>
        <div class="item-title">评审专家</div>
      </div>
    </div>
    <div class="tips">如无法成功完成登录或注册，请拨打技术服务热线**，谢谢!</div>
<!--    <el-checkbox v-model="yes" class="checkbox" style="margin:0px 0px 15px 0px;">-->
<!--      我已阅读并同意-->
<!--      <a class="link-type" href="http://www.baidu.com" target="_blank">《服务协议》</a>-->
<!--      <a class="link-type" href="http://www.baidu.com" target="_blank">《隐私协议》</a>-->
<!--    </el-checkbox>-->
    <div class="register-btn-list">
      <el-button class="goBack" size="large" @click="goLogin">返回首页</el-button>
      <el-button type="primary" color="#05559B" size="large" @click="goRegisterForm">下一步</el-button>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive} from "vue"
import {useRouter} from "vue-router";

const router = useRouter();

const {proxy} = getCurrentInstance();
const yes = ref(false)
const roleIndex = ref(0)

function goLogin() {
  router.push("/login");
}

function goRegisterForm() {
  if (!roleIndex.value) {
    proxy.$modal.msgError('请选择角色！')
  }
  if (roleIndex.value === 1) {
    router.push('/declareRegister')
  } else if (roleIndex.value === 2) {
    router.push('/unitRegister')
  } else if (roleIndex.value === 3) {
    router.push('/reviewManRegister')
  }
}

</script>

<style scoped lang="scss">
.role-select {
  width: 80%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 60px;

  .role-title {
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    color: #057ec4;
    border-bottom: 1px solid #057ec4;
  }

  .role-list {
    width: 100%;
    margin: 40px 0;
    display: flex;
    justify-content: space-between;

    .role-item {
      width: 200px;
      height: 200px;
      border: 3px solid #d0d0d0;
      border-radius: 6px;
      font-size: 32px;
      color: #057ec4;
      background: #fafafa;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      cursor: pointer;

      .icon {
        font-size: 62px;
      }

      .item-title {
        font-size: 28px;
        margin-top: 15px;
      }

      &:hover {
        border-color: #05559B;
        background: #05559B;
        color: white;
      }
    }
    .active {
      border-color: #05559B;
      background: #05559B;
      color: white;
    }
  }

  .tips {
    width: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .checkbox {
    width: 1040px;
  }

  .register-btn-list {
    margin-top: 100px;

    .goBack {
      margin-right: 130px;
    }
  }
}
</style>
